import React, { useEffect, useRef, useState } from "react";

import DatePicker from "@/date-picker/src";

function Page(): JSX.Element {
  const [selectDate, setSelectDate] = useState("");
  const dp = useRef<DatePicker | null>(null);
  useEffect(() => {
    dp.current = new DatePicker({
      allowMaskClose: false,
      // initDate: "2018-10-5",
      minDate: "2019-9-25",
      maxDate: "2021-11-25",
      onConfirm: (date) => {
        setSelectDate(date ?? "");
      },
    });
    return () => {
      dp.current?.destroy();
    };
  }, []);

  return (
    <div>
      <button
        style={{
          display: "block",
          fontSize: 30,
          width: "80%",
          height: 44,
          margin: "10px auto",
        }}
        onClick={() => {
          dp.current?.trigger();
        }}
      >
        日期选择
      </button>
      <div>选中时间:{selectDate}</div>

      <button
        onClick={() => {
          dp.current?.destroy();
        }}
      >
        销毁
      </button>
    </div>
  );
}

export default Page;
